<template>
    <div class="tab-control">
        <div class="tab-item" 
             v-for="(item,index) in titles" 
             :key="index" 
             @click="tabItemClick(index)"
             :class="{active:currentIndex==index}">
            <span>{{item}}</span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
           currentIndex:0
        };
    },
    props:{
       titles:{
           type:Array,
           default(){
               return []
           }
       }
    },
    created() {

    },
    mounted() {

    },
    methods: {
       tabItemClick(index){
           this.currentIndex = index ;
           this.$emit('tabClick',index)
       }
    }
};
</script>

<style scoped lang="scss">
.tab-control{
    display: flex;
    width:100%;
    height: 40px;
}
.tab-item{
   flex: 1;
   text-align: center;
   line-height: 40px;
   font-size: 15px;
   span{
       padding: 10px;
   }
}

.active span{
   border-bottom: 2px solid #FF8198;
   color:#FF8198;
}
</style>
